<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CNY充提</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/statics/layui/css/layui.css" media="all">
  <style>
    .layui-tab-content {
      padding-top: 30px;
    }
    .id-card img{
      width:200px; height:120px; border:dashed 1px gray; cursor: pointer;
    }
    .validate{
      position:absolute;
      left:110px;
      top:3px;
    }
  </style>
</head>

<body>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>CNY充提</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">
    余额： <span id="spanMoney" class="layui-badge layui-bg-orange">0</span>
  </blockquote>
  <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
      <li class="layui-this">充值</li>
      <li class="">提现</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
      <div class="layui-tab-item layui-show">
        <form class="layui-form" action="" lay-filter="form2">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label" style="padding-top:2px;">风险说明</label>
              <div class="layui-input-inline" style="width: 690px; line-height: 25px;">
                DG提示您比特币等密码币的交易存在风险，在全球范围内一周7天，一天24小时无休止交易，没有每日涨停跌停限制，价格受到新闻事件，各国政策，市场需求等多种因素影响，浮动很大。我们强烈建议您事先调查了解，在自身所能承受的风险范围内参与交易。<br />
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><span class="layui-required">*</span> 充值数量</label>
              <div class="layui-input-inline" style="width: 150px;">
                <input id="money" type="text" name="money" placeholder="￥" lay-verify="required|number" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline" style="width: 350px;">
              <input type="radio" name="type" value="1" title="银行卡" checked="checked">
              <input type="radio" name="type" value="2" title="支付宝">
              <input type="radio" name="type" value="3" title="微信">
            </div>
          </div>
          <div class="layui-form-item bank">
            <label class="layui-form-label">银行</label>
            <div class="layui-input-inline">
              <select id="bankCode" name="bankCode">
                <option value="CCB">中国建设银行</option>
                <option value="BOC">中国银行</option>
                <option value="ICBC">中国工商银行</option>
                <option value="ABC">中国农业银行</option>
                <option value="PSBC">中国邮政储蓄银行</option>
                <option value="CITIC">中信银行</option>
                <option value="CMB">招商银行</option>
                <option value="CEB">中国光大银行</option>
                <option value="CMBC">中国民生银行</option>
                <option value="CIB">兴业银行</option>                
              </select>
            </div>
          </div>
          <div class="layui-form-item bank">
              <div class="layui-inline">
                <label class="layui-form-label"><span class="layui-required">*</span> 银行卡号</label>
                <div class="layui-input-inline" style="width: 150px;">
                  <input id="bankNo" type="text" name="bankNo" lay-verify="required|number" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><span class="layui-required">*</span> 身份证号码</label>
              <div class="layui-input-inline" style="width: 300px;">
                <input id="cardId" type="text" name="cardId" lay-verify="required|identity" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item" id="itemValidate">
            <div class="layui-inline">
              <label class="layui-form-label"><span class="layui-required">*</span> 验证码</label>
              <div class="layui-input-inline" style="width: 300px;">
                <input id="validateCode" type="text" name="validateCode" lay-verify="required" autocomplete="off" class="layui-input" style="width:100px;" />
                <div class="validate">
                  <a href="javascript:void(0);" onclick="CreateVerificationCode()" title="点击刷新验证码"><img id="randCodeImage" style="border:0px;" /></a>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button id="btn_submit3" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo3">提交认证</button>
            </div>
          </div>
        </form>
      </div>
      <div class="layui-tab-item">        
        <form class="layui-form" action="" lay-filter="form1">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><span class="layui-required">*</span> 头像</label>
              <div class="layui-input-inline" style="width: 100px;">
                <img id="imageView" style="width:92px; height:92px;" />
                <input id="tbImage" type="hidden" field="image" />
                <br /><br />
                <button type="button" class="layui-btn" id="uploadImage">
                  上传头像
                </button>
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><span class="layui-required">*</span> 昵称</label>
              <div class="layui-input-inline" style="width: 250px;">
                <input id="nickName" type="text" name="nickName" lay-verify="required" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><span class="layui-required">*</span> 邮箱</label>
              <div class="layui-input-inline" style="width: 250px;">
                <input id="email" type="text" name="email" lay-verify="required|email" autocomplete="off" class="layui-input" />
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline" style="width: 250px;">
              <input type="radio" name="sex" value="1" title="男" checked="checked">
              <input type="radio" name="sex" value="2" title="女">
              <input type="radio" name="sex" value="0" title="保密">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">保存资料</button>
              <!-- <button class="layui-btn layui-btn-primary" id="reset1">重置</button> -->
            </div>
          </div>
        </form>
      </div>
      <div class="layui-tab-item">
        <form class="layui-form" action="" lay-filter="form2">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><span class="layui-required">*</span> 手机号</label>
              <div class="layui-input-inline" style="width: 250px;">
                <input id="mobilePhone" type="text" name="mobilePhone" lay-verify="required|phone" placeholder="请输入11位手机号码" autocomplete="off" class="layui-input" />
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><span class="layui-required">*</span> 手机验证码</label>
              <div class="layui-input-inline" style="width: 180px;">
                <input id="smsCode" type="text" name="smsCode" lay-verify="required|number" placeholder="请输入6位手机验证码" autocomplete="off" class="layui-input" />                
              </div>
              <div class="layui-input-inline" style="width: 250px;">
                <button id="btn_sms" class="layui-btn">获取</button>
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button id="btn_submit2" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo2">绑定手机号</button>
            </div>
          </div>
        </form>
      </div>
      
    </div>
  </div>

  <script src="/statics/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="../js/config.js"></script>
  <script type="text/javascript" src="../js/utils.js"></script>
  <script>
    var model = null, lock = false, time = 120, t = null;
    $(function () {
      getInfo(function (data) {
        $("#spanUserName").text(data.userName);
        $("#tipSDate").text(FormatUtils.parseTimestampToDate(data.createTime));
        $("#tipCheckStatus").text(data.checkStatusName || '待提交认证');

        var head = data.headImage || '/statics/images/head.jpg';
        $("#imageView").attr("src", head);
        $("#tbImage").val(head);
        $("#imageView1").attr("src", data.cardImage1 || "../images/id-card-front.jpg");
        $("#tbImage1").val(data.cardImage1);
        $("#imageView2").attr("src", data.cardImage2 || "../images/id-card-back.jpg");
        $("#tbImage2").val(data.cardImage2);
        $("#imageView3").attr("src", data.cardImage3 || "../images/id-card-inhand.jpg");
        $("#tbImage3").val(data.cardImage3);
        if(data.checkStatus==0 || data.checkStatus==1){
          $("#btn_submit3").hide();
          $("#realName").attr("readonly", "readonly");
          $("#cardId").attr("readonly", "readonly");
          $("#validateCode").attr("readonly", "readonly");
          $("#itemValidate").hide();
        }

        $("#btn_sms").on('click', function(){
          if(lock) return false;
          var mobile = $("#mobilePhone").val();
          if(!mobile){
            layer.alert('请输入11位手机号码', { title: '出错了', icon: 5 }, function(index){
              $("#mobilePhone").focus();
              layer.close(index);
            });
            return false;
          }
          //手机号正则
          var mobileReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
          if (!mobileReg.test(mobile)) {
            layer.alert('请输入有效的手机号码', { title: '出错了', icon: 5 }, function(index){
              $("#mobilePhone").focus();
              layer.close(index);
            });
            return false;
          }

          //开始倒计时
          $("#btn_sms").addClass("layui-btn-disabled");
          lock = true;
          time = 120;
          t = setInterval(function(){
            time--;
            $("#btn_sms").text(time+'(s)');
            if(time<=0){
              $("#btn_sms").removeClass("layui-btn-disabled");
              $("#btn_sms").text("获取");
              lock = false;
              clearInterval(t);
            }
          }, 1000);

          var json = {mobilePhone: mobile};
          var url = Config.WEB_SERVER_API + Config.URI.USER_SMS_SEND;
          HttpUtils.httpPost(url, json, function (result, success) {
            if (success) {
              layer.alert('短信验证码已发送到您的手机，请注意查收！', { title: '提示' });
            } else {
              layer.alert(result.resultMsg, { title: '出错了', icon: 5 });
              $("#btn_sms").removeClass("layui-btn-disabled");
              lock = false;
              t = null;
            }
          });
          return false;
        });
      });      
    });

    layui.use(['form', 'element', 'upload'], function () {
      var form = layui.form, layer = layui.layer, element = layui.element, upload = layui.upload;

      CreateVerificationCode();

      //头像
      var uploadHead = upload.render({
        elem: '#uploadImage', //绑定元素
        url: Config.URI.UPLOAD_IMAGE, //上传接口
        done: function (res) {
          $("#imageView").attr("src", res.url);
          $("#tbImage").val(res.url);
        },
        error: function (xhr) {
          console.log(xhr);
          alert('上传失败!');
        }
      });

      var uploadImage1 = upload.render({
        elem: '#imageView1', //绑定元素
        url: Config.URI.UPLOAD_IMAGE, //上传接口
        done: function (res) {
          $("#imageView1").attr("src", res.url);
          $("#tbImage1").val(res.url);
        },
        error: function (xhr) {
          console.log(xhr);
          alert('上传失败!');
        }
      });
      var uploadImage2 = upload.render({
        elem: '#imageView2', //绑定元素
        url: Config.URI.UPLOAD_IMAGE, //上传接口
        done: function (res) {
          $("#imageView2").attr("src", res.url);
          $("#tbImage2").val(res.url);
        },
        error: function (xhr) {
          console.log(xhr);
          alert('上传失败!');
        }
      });
      var uploadImage3 = upload.render({
        elem: '#imageView3', //绑定元素
        url: Config.URI.UPLOAD_IMAGE, //上传接口
        done: function (res) {
          $("#imageView3").attr("src", res.url);
          $("#tbImage3").val(res.url);
        },
        error: function (xhr) {
          console.log(xhr);
          alert('上传失败!');
        }
      });

      //监听提交
      form.on('submit(demo1)', function (data) {
        var json = data.field;
        json.sex = parseInt(json.sex);
        json.headImage = $("#tbImage").val();
        var url = Config.WEB_SERVER_API + Config.URI.USER_INFO_SAVE;
        HttpUtils.httpPost(url, json, function (result, success) {
          if (success) {
            layer.alert('恭喜您，修改成功！', { title: '提示' }, function (index) {
              window.location.reload();
            });
          } else {
            layer.alert(result.resultMsg, { title: '出错了', icon: 5 });
          }
        });
        return false;
      });

      //监听提交
      form.on('submit(demo2)', function (data) {
        var json = data.field;
        var url = Config.WEB_SERVER_API + Config.URI.USER_MOBILE_SAVE;
        HttpUtils.httpPost(url, json, function (result, success) {
          if (success) {
            layer.alert('恭喜您，手机绑定成功！', { title: '提示' }, function (index) {
              window.location.reload();
            });
          } else {
            layer.alert(result.resultMsg, { title: '出错了', icon: 5 });
          }
        });
        return false;
      });

      //监听提交
      form.on('submit(demo3)', function (data) {
        var json = data.field;
        json.cardImage1 = $("#tbImage1").val();
        if(!json.cardImage1){
          layer.alert("请上传身份证正面照！", { title: '出错了', icon: 5 });
          return false;
        }
        json.cardImage2 = $("#tbImage2").val();
        if(!json.cardImage2){
          layer.alert("请上传身份证背面照！", { title: '出错了', icon: 5 });
          return false;
        }
        json.cardImage3 = $("#tbImage3").val();
        if(!json.cardImage3){
          layer.alert("请上传手持身份证照片！", { title: '出错了', icon: 5 });
          return false;
        }
        var url = Config.WEB_SERVER_API + Config.URI.USER_INFO_CHECK;
        HttpUtils.httpPost(url, json, function (result, success) {
          if (success) {
            layer.alert('恭喜您，提交认证成功，耐心等待管理员审核！', { title: '提示' }, function (index) {
              window.location.reload();
            });
          } else {
            layer.alert(result.resultMsg, { title: '出错了', icon: 5 });
          }
        });
        return false;
      });

      //USER_INFO_CHECK

      //表单初始赋值
      //表单初始赋值
      model.sex = model.sex + '';
      model.checkStatus = model.checkStatus || '-1' + '';
      model.status = model.status + '';
      form.val('form1', model);
      form.val('form2', model);

      // $("#reset1").on('click', function(){
      //   form.val('form1', model);
      // });
    });

    var getInfo = function (callback) {
      DataUtils.getUserInfo(function (data) {
        model = data;
        if (callback) {
          callback(data);
        }
      });
    };

    function CreateVerificationCode(){
        var rad = Math.floor(Math.random() * Math.pow(10, 8));
        //uuuy是随便写的一个参数名称，后端不会做处理，作用是避免浏览器读取缓存的链接
        $("#randCodeImage").attr("src", Config.WEB_SERVER_API + Config.URI.VERIFICATION_CODE + "?uuuy="+rad);
    }
  </script>

</body>

</html>